<!doctype html>
<html  class="x-admin-sm">
<head>
	<meta charset="UTF-8">
	<title>后台登录-X-admin2.2</title>
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/login.css">
	  <link rel="stylesheet" href="./css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script src="js/global.js" type="text/javascript" charset="utf-8"></script>
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
			body{
				margin: 0px;
			}
			.zhezhao{
				position: fixed;
				left: 0px;
				top: 0px;
				background: #000;
				width: 100%;
				height: 100%;
				opacity: 1;
			}
			.tankuang{
				position: relative;
				background: #fff;
				width: 50%;
				height: 80%;
				border-radius: 5px;
				margin: 5% auto;
			}
			#header{
				height: 40px;
			}
			#header-right{
				position: absolute;
				width: 25px;
				height: 25px;
				border-radius: 5px;
				background: red;
				color: #fff;
				right: 5px;
				top: 5px;
				text-align: center;
			}
		</style>
</head>

	<body class="login-bg" lay-filter="test">
		<canvas id="fullstarbg">你的浏览器不支持canvas标签</canvas>
		<div class="login">
			<div class="message">喵喵喵管理系统登录</div>
			<div id="darkbannerwrap"></div>
			<form method="post" id="fmLogin" class="layui-form" onsubmit="return false;">
				<input name="name" placeholder="用户名" id="un" type="text" lay-verify="required" class="layui-input">
				<hr class="hr15">
				<input name="password" lay-verify="required" placeholder="密码" type="password" class="layui-input">
				<hr class="hr15">
				<a onclick="dianwo()" style="margin-left: 270px;">忘记密码？</a>
				<!--<button type="button" onclick="dianwo()" style="margin-left: 270px;">忘记密码？</button>-->
		<div class="zhezhao" id='zhezhao'>
			<div class="tankuang" style="height: 400px; margin-top: 200px;width:500px">
			</br>
			</br>
			</br>
			</br>
			</br>
					<div class="layui-form-item">
										<form onsubmit="return false" id="loginFromPhone" class="layui-form">
						
						
										<div class="layui-form-item">
						<label class="layui-form-label">手机号:</label>
				<div class="layui-input-inline" style="width:320px;">
					<input type="text" name="newPassword" placeholder="请输入手机号" id="Phone" class="layui-input"/>
				</div>
									</div>
									<div class="layui-form-item">
										<label class="layui-form-label">验证码:</label>
				<div class="layui-input-inline" style="width:150px;">
					<input type="text" id="SMSText" placeholder="验证码" class="layui-input">
				</div>
				<div class="layui-input-inline" style="width:150px;">
					<input class="layui-btn layui-btn-lg" id="SMSCheck" type="button" value="获取验证码" style="height: 50px;">
				</div>
									</div>
									
									<div class="layui-form-item">
						<label class="layui-form-label">新的密码:</label>
				<div class="layui-input-inline" style="width:320px;">
					<input type="password" name="newPassword" placeholder="请输入新密码" id="xmm" class="layui-input"/>
				</div>
									</div>
									<div class="layui-form-item">
						<label class="layui-form-label">请确认密码:</label>
				<div class="layui-input-inline" style="width:320px;">
					<input type="password" name="newPassword" placeholder="请确认密码" id="xmm1" class="layui-input"/>
				</div>
									</div>
									<input value="确认修改" class="layui-btn" id="SMSLogin" type="submit" style="height: 50px;width: 320px;margin-left: 110px;">
			
										</form>
													
					<div id="header-right" onclick="hidder()">x</div>
				</div>
			</div>
		</div>
				<hr class="hr15">
				<input value="登录" lay-submit lay-filter="login" style="width:100%;" type="submit">
				<hr class="hr20">
			</form>
		</div>
		<script type="text/javascript" src="lib/layui/layui.js" ></script>
		
		<script type="text/javascript">
			document.getElementById('zhezhao').style.display="none";
			function dianwo(){
				document.getElementById('zhezhao').style.display="";
			}
			function hidder(){
				document.getElementById('zhezhao').style.display="none";
			}
		</script>
		<script type="text/javascript">
			//业务代码
			layui.use(['layer','form','table','element'],function(){
				var $=layui.$,
				form=layui.form,
				element=layui.element,
				layer=layui.layer;
				element.on("tab(dd)",function(data){
							console.log(JSON.stringify(data));
						})
						
				var table=layui.table;
				//监听提交
				form.on('submit(login)',function(data){
					$.post(globalData.server+"/login",$("#fmLogin").serialize(),function(res){
						if(res.success){
							globalData.setUserInfo(res.id,$("#un").val(),res.token,res.roleids);
							window.location.href="index.html";
						}else{
							layer.msg(res.msg);
							
						}
					},"json");
					return false;
				});
				
				
					/**
				 * 获取短信验证码
				 */
				var sms;
				$("#SMSCheck").click(function() {
					var phone = window.document.getElementById("Phone").value;
					if(phone != "") {
						$.get("http://localhost:8080/sms", {
							"phone": phone
						}, function(res) {
							if(res.code == "-1") {
								layer.alert(res.msg)
							} else if(res.code == 0) {
								layer.alert(res.msg);
								sms = res.sms;
								console.log(sms);
							}
						})
					} else {
						layer.msg("手机为空")
					}

				})

				/*
				 *对比 
				 */
				$("#SMSLogin").click(function() {
					var phone = document.getElementById("Phone").value;
					var SMSText = $("#SMSText").val();
					var xmm = document.getElementById("xmm").value;//新密码
					var xmm1 = document.getElementById("xmm1").value;//再次确认密码
					if(sms == SMSText) {
						if(xmm != '') {
								if(xmm.length > 5) {
									if(xmm1 != '') {
										if(xmm == xmm1) {
											$.get("http://localhost:8080/smsLogin", {
											"phone": phone,
											"xmm":xmm
						}, function(res) {
							if(res>0) {
								
								/*globalData.setUserInfo(res.id,res.uname,res.token,res.roleids);*/
								location.href = "login.html";
							} else {
								layer.msg("账号密码错误！");
							}
						})
										} else {
											layer.msg("请确定您两次输入的密码是否一致", {
												icon: 0
											})
										}
									} else {
										layer.msg("请再次输入新密码", {
											icon: 0
										});
									}
								} else {
									layer.msg("密码长度必须大于5位", {
										icon: 0
									});
								}
							
						} else {
							layer.msg("请输入新密码", {
								icon: 0
							});
						}
						
						}
					
				
	});
		})
		</script>
</body>
</html>